<template>
  <!-- 输入框 -->
  <div class="mb-10">
    <el-row :gutter="10" class="mb-10">
      <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
        <el-row>
          <el-col :span="12">
            <el-select
              filterable
              clearable
              v-model.trim="selectProvinceInput"
              placeholder="请选择地区"
              @change="handleChangeOne"
              @keyup.enter="load"
              @keyup.esc="resets"
            >
              <div v-for="item in options" :key="item.id">
                <el-option
                  v-for="country in item.childrens"
                  :key="country.id"
                  :label="country.name_en"
                  :value="country"
                >
                </el-option>
              </div>
            </el-select>
          </el-col>
          <el-col :span="12">
            <el-button class="ml-5" type="primary" @click="load"
              >搜索</el-button
            >
            <el-button type="primary" @click="resets()">重置</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>

  <!-- 按钮 -->
  <el-row class="mb-10">
    <el-col :span="24">
      <el-button type="primary" @click="handleadd"
        >新增<el-icon class="ml-5" size="20px"><CirclePlus /></el-icon
      ></el-button>
      <el-popconfirm
        width="220"
        confirm-button-text="确定"
        cancel-button-text="我再想想"
        icon="InfoFilled"
        icon-color="red"
        title="您确定批量删除这些数据吗?"
        @confirm="delBatch"
        ><template #reference>
          <el-button type="danger"
            >批量删除<el-icon class="ml-10" size="20px"><Remove /></el-icon
          ></el-button> </template
      ></el-popconfirm>
      <el-upload
        class="upload_file m-12"
        :action="'http://' + serverIp + ':9090/global_data/import'"
        :show-file-list="false"
        accept=".xlsx"
        :on-success="handleExcelImportSuccess"
        :on-error="handleExcelImportError"
      >
        <el-button type="primary">
          导入<el-icon class="ml-5" size="20px"><Upload /></el-icon>
        </el-button>
      </el-upload>

      <el-button type="primary" @click="exp"
        >导出<el-icon class="ml-5" size="20px"><Download /></el-icon
      ></el-button>
    </el-col>
  </el-row>
  <!-- 表单 -->
  <div class="chinadata_table">
    <!--selection-change 当选择项发生变化时会触发该事件 -->
    <el-table
      :data="tableData"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="id" width="80" />
      <el-table-column prop="name" label="全球地区" width="430" />
      <el-table-column prop="value" label="确诊人数" width="400" />

      <el-table-column label="操作" fixed="right" min-width="200">
        <template v-slot:default="scope">
          <el-button type="success" @click="handleEdit(scope.row)"
            >编辑<el-icon class="ml-5"><Edit /></el-icon
          ></el-button>

          <!-- 气泡确认框 删除确认框 -->
          <el-popconfirm
            width="220"
            confirm-button-text="确定"
            cancel-button-text="我再想想"
            icon="InfoFilled"
            icon-color="red"
            title="您确定删除吗?"
            @confirm="del(scope.row.id)"
          >
            <template #reference>
              <el-button type="danger"
                >删除<el-icon class="ml-5"><Delete /></el-icon
              ></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 分页 -->
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="pageNum"
      v-model="pageSize"
      :page-sizes="[2, 5, 10, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :small="small"
      :disabled="disabled"
      :background="background"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <!-- 弹窗 -->
  <el-dialog v-model="dialogFormVisible" title="地区信息" width="30%">
    <el-form :label-width="formLabelWidth">
      <el-form-item label="确诊人数">
        <el-input
          v-model.trim="form.value"
          autocomplete="off"
          placeholder="请输入确诊人数"
          clearable
          @clear="clearValue"
        />
      </el-form-item>
      <el-form-item label="地区">
        <el-select
          filterable
          clearable
          v-model.trim="selectProvince"
          placeholder="请选择地区"
          style="width: 145px"
          @change="handleChange"
          @keyup.enter="load"
        >
          <div v-for="item in options" :key="item.id">
            <el-option
              v-for="country in item.childrens"
              :key="country.id"
              :label="country.name_en"
              :value="country"
            >
            </el-option>
          </div>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
  
  <script>
//全球数据
import options from '@/assets/map/addressJson.js'
import { serverIp } from '../../../public/config'

//中国数据

export default {
  name: 'CovidGobalTable',

  data() {
    return {
      //中国省市区级
      options, //省市区数据
      selectProvinceInput: '',
      selectProvince: '',
      countryID: '',

      //表格的数据
      tableData: [],

      //   分页器
      pageNum: 1,
      pageSize: 10,
      small: false,
      disabled: false,
      background: false,
      total: 0,

      // 分页查询-输入框(表格当中的数据)
      name: '',
      value: 0,

      //表格新增的数据
      form: {
        name: '',
        value: 0
      },
      // 弹窗
      dialogFormVisible: false,
      formLabelWidth: '80px',

      // 批量删除
      multipleSelection: [],

      serverIp: serverIp
    }
  },
  created() {
    // 请求分页查询的数据
    this.load()
    this.selectedOptions = this.name
  },
  methods: {
    // 分页
    handleSizeChange(pageSize) {
      console.log('每页的数据:' + pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log('当前页数：' + this.pageNum)
      this.pageNum = pageNum
      this.load()
    },

    // 请求分页查询的数据
    load() {
      this.$http
        .get('/global_data/page', {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            name: this.name,
            value: this.value
          }
        })
        .then((res) => {
          console.log('分页类型' + typeof res)
          console.log(res)
          this.tableData = res.data.records
          this.total = res.data.total
        })
    },
    // 重置
    resets() {
      this.selectProvinceInput = ''
      this.name = ''
      this.load()
    },
    // 弹窗
    handleadd() {
      this.dialogFormVisible = true
      this.form = {}
    },
    // 新增数据
    save() {
      this.$http.post('/global_data', this.form).then((res) => {
        console.log(res)
        if (res.status == '200') {
          this.$message.success('保存成功')
          this.dialogFormVisible = false
          // 刷新页面数据
          this.load()
        } else {
          this.$message.error('保存失败')
        }
      })
    },
    // 编辑
    handleEdit(row) {
      // row是proxy 需要转化为json
      console.log(row)
      console.log('编辑类型' + typeof row.value)
      // console.log(row.address)

      this.form = JSON.parse(JSON.stringify(row))
      console.log(this.form)
      this.handleTest(row)
      // this.handleTest(row)
      // this.form = JSON.parse(JSON.stringify(row));
      // 打开弹窗
      this.dialogFormVisible = true
    },
    // 删除
    del(id) {
      this.$http.delete('/global_data/' + id).then((res) => {
        if (res.data) {
          this.$message.success('删除成功')
          // 刷新页面数据
          this.load()
        } else {
          this.$message.error('删除失败')
        }
      })
    },
    // 批量删除
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    delBatch() {
      // 对象数组变成 纯id的数组
      let ids = this.multipleSelection.map((v) => v.id) //[{},{},{}]=>[1,2,3]
      console.log(ids)

      this.$http.delete('/global_data/del/batch', { data: ids }).then((res) => {
        if (res.data) {
          this.$message.success('批量删除成功')
          // 刷新页面数据
          this.load()
        } else {
          this.$message.error('批量删除失败')
        }
      })
    },
    // 导出文件
    exp() {
      // alert('123')
      console.log('导出文件中')
      window.open(`http://${serverIp}:9090/global_data/export`)
    },
    // 导入文件
    //成功
    handleExcelImportSuccess() {
      this.$message.success('导入成功')
      this.load()
    },
    //失败
    handleExcelImportError() {
      this.$message.error('导入失败')
      this.load()
    },

    //初始化省
    handleChangeOne(value) {
      console.log(value)
      if (value != '') {
        this.name = value.name_en
        console.log('页面选择地区:' + this.name)
      } else {
        this.name = ''
      }
      this.selectProvinceInput = this.name
      console.log('页面选择地区:' + this.selectProvinceOne)
    },

    handleChange(value) {
      if (value != '') {
        this.form.name = value.name_en
        console.log('页面选择地区:' + this.name)
      } else {
        this.name = ''
      }
      this.selectProvince = this.form.name
    },

    //回显 （获取数据库的省市）
    handleTest(newdata) {
      console.log(newdata.name)
      if (newdata.name != '') {
        this.selectProvince = newdata.name
      } else {
        this.selectProvince = ''
        console.log('数据库为空' + this.selectProvince)
      }
    },

    clearValue(value) {
      const parseResult = parseInt(value)
      if (isNaN(parseResult)) {
        this.form.value = 0
        return
      }
    }
  }
}
</script>
  
  <style lang="less" scoped>
// 分页
.demo-pagination-block {
  padding: 10px;
}
.upload_file {
  display: inline-flex;
  /deep/ .el-upload {
    display: block !important;
  }
}
// 弹窗
</style>